.all-can-use-components {
    // width: 220px;
    // height: calc(100% - 90px);
    background: #fff;
    overflow-y: hidden;
    overflow-x: hidden;
    &.all-grouped {
        .add-component-grouped {
            box-sizing: border-box;
            padding: 20px;
            .add-component-grouped-item {
                .add-grouped-item-title {
                    font-size: 14px;
                    font-family: Microsoft YaHei;
                    margin-bottom: 8px;
                    color: #333;
                }
                .add-grouped-item-list {
                  margin-bottom: 20px;
                    > div {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                    }
                    .add-grouped-item-list-btn {
                        box-sizing: border-box;
                        .add-grouped-item-list-btn-title {
                            margin-bottom: 5px;
                            width: 80px;
                            height: 80px;
                            font-size: 12px;
                            border-radius: 4px;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            cursor: pointer;
                            .item-pic-container {
                                width: 25px;
                                margin-bottom: 8px;
                                img {
                                display: inline-block;
                                max-width: 100%;
                                }
                            }
                        }
                        .add-grouped-item-list-btn-title.active {
                            background: #155bd4;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
}